<template>
	<view class="container  font-10px" v-show="mainshow">

		<view class=" top d-flex flex-row">
			<view class=" box-shadow top-left ">
				<view class="item d-flex">
					<text class="title dep">客户公司：</text>
					<text class="content  lin-hid">{{equipmentInfo.user_dep}}</text>
				</view>
				<view class="item">
					<text class="title">设备型号：</text>
					<text class="content">{{equipmentInfo.type}}</text>
				</view>
				<view class="item  d-flex">
					<view class="title" style="text-indent: 20rpx;">机身号：</view>
					<text class="content">{{equipmentInfo.number}}</text>
				</view>
				<view class="item">
					<text class="title">设备配置：</text>
					<text class="content">{{equipmentInfo.configure}}</text>
				</view>
				<view class="item">
					<text class="title">墨水型号：</text>
					<text class="content">{{equipmentInfo.solvent_type}}</text>
				</view>
				<view class="item">
					<text class="title">溶剂型号：</text>
					<text class="content">{{equipmentInfo.ink_type}}</text>
				</view>
				<view class="item d-flex">
					<view class="title" style="text-indent: 20rpx;">联系人：</view>
					<text class="content">{{info.applicant}}</text>
				</view>
				<view class="item" @tap="contact(info.phone)">
					<text class="title">电话号码：</text>
					<text class="content">{{info.phone.replace(info.phone.slice(3,7),'*****').trim()}}</text>
					<text class="cuIcon-phone font-12px margin-left"></text>
				</view>
				<view class="item">
					<text class="title">提交时间：</text>
					<text class="content">{{info.createTime}}</text>
				</view>
			</view>
			<view class=" box-shadow flex-column justify-center top-right">
				<view class="item d-flex">
					<text class="title">是否转交：</text>
					<text class="content">{{isTransfer?"是":"否"}}</text>
				</view>
				<view class="item">
					<text class="title">设备维护专员：</text>
					<text class="content">{{engineeInfoPass.name}}</text>
				</view>
				<view class="item flex-column">
					<text class="title">现跟进工程师：</text>
					<text class="content text-bold text-xxl ">{{engineeInfo.name}}</text>
				</view>
			</view>
		</view>
		<view class="box-shadow middle">
			<view class="item flex-column">
				<text class="title">故障现象：</text>
				<text class="content">{{info.content?info.content:'无'}}</text>
			</view>
		</view>
		<view class="box-shadow flex-column bottom">
			<text class="text">故障图片：</text>
			<view class="flex-row img-box" v-if="info.file.length>0">
				<view v-for="(item,key) in info.file" :key="key" class="img-container">
					<image :src="item.file" class="my-img" @tap="preview(item.file)"></image>
				</view>
			</view>
			<view v-else class="text-gray text-center">
				暂无图片....
			</view>
		</view>

		<view class="button-box flex-row flex-space-between">
			<!-- <view  class="entering button-bg" @tap="entering()">录入工单</view> -->
			<!-- <view  class="entering button-bg" @tap="remote()">远程处理</view> -->
			<view class="entering button-bg" @tap="remote()">{{info.status === 0?'录入工单':'更新工单'}}</view>
			<view class="entering button-bg" @tap="toDetails()" v-if="info.status !== 0">工单详情</view>
			<view class="assign button-bg" @tap="handleTap('picker')" v-if="info.status === 0">任务转让</view>
		</view>
		<lb-picker ref="picker" mode="multiSelector" :list="transferPeoples" :level="1" confirm-color="#09BB07" @change="handleChange"
		 @confirm="handleConfirm" @cancel="handleCancel">
		</lb-picker>
	</view>
</template>

<script>
	import uplod from '@/components/sunui-upimg/sunui-upimg.vue'
	import QSswitch from '@/components/QS-inputs-split/elements/QS-switch/index.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import {
		getRepairDetailsByEquipmentId,
		getInfo,
		getEngineerList,
		transferRepair,
		getEquipmentById
	} from '@/api/user/index.js'
	export default {
		components: {
			uplod,
			QSswitch,
			uniCollapse,
			uniCollapseItem,
			LbPicker
		},
		data() {
			return {
				mainshow: false,
				showflag: false,
				// 选中的转让人
				transferPeople: '',
				// 选中的转让人id
				transferPeopleId: '',
				// 转让人信息
				transferPeoples: [{
					value: '1',
					label: '小花'
				}, {
					value: '2',
					label: '小花'
				}, {
					value: '3',
					label: '小花'
				}, {
					value: '4',
					label: '小花'
				}, {
					value: '5',
					label: '小花'
				}, {
					value: '6',
					label: '小花'
				}],

				id: '',
				isTransfer: '',
				// 现工程师
				engineeInfo: {
					id: '',
					number: '',
					password: '',
					name: '',
					job: '',
					phone: ''
				},
				// 原工程师
				engineeInfoPass: {
					id: '',
					number: '',
					password: '',
					name: '',
					job: '',
					phone: ''
				},
				info: {
					id: 16,
					applicant: " ",
					status: '',
					phone: " ",
					equipment_id: 3,
					status: 3,
					engineer_id: 4,
					engineer_id_pass: '',
					createTime: "2020-05-04 00:00:00",
					content: "",
					file: [{
						id: 19,
						repair_id: 16,
						file: ""
					}]
				},
				// 工单
				workInfo: {
					id: '',
					type: 1,
					reason: " ",
					result: '',
					solution: "",
					fitting: '',
					fitting_addtion: "",
					file: [{
						id: '',
						report_id: '',
						file: " "
					}]

				},
				// 设备信息
				equipmentInfo:{
					
				}
			}
		},
		methods: {
			/**
			 * 联系客户
			 */
			contact(phone) {
				let _this = this
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},

			handleTap(picker) {
				this.$refs[picker].show()
			},
			/**
			 * 选择转让人监听回调
			 */
			handleChange(item) {
				console.log(item)
			},
			/**
			 * 任务转让
			 */
			assign() {
				let info = {
					id: this.id,
					engineer_id: this.transferPeopleId

				}
				transferRepair(info).then((res) => {
					console.log(res)
					if (res.code == 1) {
						let that = this
						uni.reLaunch({
							url: '/pages/views/engineer/EnteringSuccess/EnteringSuccess?id=' + 3 + '&name=' + that.transferPeople,
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			handleConfirm(item) {
				let People = item.item.map(item => item.label).join(' ')
				this.transferPeopleId = item.item.map(item => item.value).join(' ')
				this.transferPeople = People
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要将此工单转让给' + People + "吗？",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在转交'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 1000);
							// 判断当前工程师是否为高级工程师
							const job = that.$store.getters.job
							console.log(job)
							if (job === '高级工程师') {
								that.assign()
							} else {
								uni.showToast({
									icon: 'none',
									title: '非高级工程师禁止转让工单'
								})
							}
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				console.log("转让人为：" + this.transferPeople)

			},
			handleCancel(item) {},

			// ############################录入工单#############################
			entering() {
				// 允许从相机和相册扫码
				let that = this
				uni.scanCode({
					success: function(res) {

						console.log("二维码的扫描结果为：" + res)
						let id = res.result.split('=')[1]
						console.log("设备id为：" + that.info.equipment_id + "扫描的二维码的设备id为：" + id)
						if (id == that.info.equipment_id) {
							let _this = that
							uni.navigateTo({
								url: '/pages/views/engineer/WorkStatement/WorkStatement?equipment_id=' + _this.info.equipment_id +
									'&id=1&repair_id=' + _this.info.id
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: "该设备和当前维修单设备不匹配"
							})
						}
					}
				});
			},
			// ############################图片预览#############################
			preview(imageUrl) {
				var imgArr = [];
				imgArr.push(imageUrl);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// ############################远程处理#############################
			remote() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要处理此维修单吗？',
					success: function(res) {
						if (res.confirm) {
							let _this = that
							uni.navigateTo({
								url: '/pages/views/engineer/WorkStatement/WorkStatement?equipment_id=' + _this.info.equipment_id +
									'&id=1&repair_id=' + _this.info.id + '&status=' + _this.info.status + '&report_id=' + _this.info.report_id
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//##############################工单详情###########################################
			toDetails() {
				uni.navigateTo({
					url: "/pages/views/engineer/WorkStatementDetails/WorkStatementDetails?id=" + this.info.report_id
				});
			},
	
		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		},
		onLoad(op) {
			this.id = op.id
			// this.id = 38
			console.log("id" + this.id)
			/**
			 * 获取维修单详情信息
			 */
			getRepairDetailsByEquipmentId(this.id).then( res => {
				this.info = res.result
				console.log(this.info)
				if (this.info.status_pass == 1) {
					/**
					 * 获取转交工程师信息
					 */
					console.log("转接工程师id为：" + this.info.engineer_id_pass)
				// 	// 原工程师
				
				// 	getInfo(this.info.engineer_id_pass).then((res) => {
				// 		this.engineeInfoPass = res.result

				// 	})
					// 现工程师
					getInfo(this.info.engineer_id).then((res) => {
						this.engineeInfo = res.result
					})
					getEquipmentById(this.info.equipment_id).then(res =>{
						this.equipmentInfo = res.result[0]
						getInfo(this.equipmentInfo.engineer_id).then((res) => {
							this.engineeInfoPass = res.result
						})
						console.log(this.equipmentInfo)
						uni.hideLoading()
					})
				
					this.isTransfer = true

				} else {
					// 现工程师
					getInfo(this.info.engineer_id).then((res) => {
						this.engineeInfo = res.result
						this.engineeInfoPass = res.result
					})
					getEquipmentById(this.info.equipment_id).then(res =>{
						this.equipmentInfo = res.result[0]
						uni.hideLoading()
					})
					this.isTransfer = false
				}
				
				setTimeout(() => {
					uni.hideLoading()
					this.showflag = true
					this.mainshow = true
				}, 1000)

			})


			/**
			 * 查询工程师信息
			 */
			getEngineerList().then((res) => {
				let engineers = res.result.data
				let arr2 = []
				engineers.forEach((cur, index, arr) => {
					arr2.push({
						value: arr[index].id,
						label: arr[index].name
					})
				})
				this.transferPeoples = arr2
				uni.hideLoading()
				this.showflag = true

			})


		},

	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #EFEFF4 ;
		height: 100%;
	}
	.container {
		letter-spacing: 1rpx;
		line-height: 40rpx;
		padding: 25rpx;
		width: 100%;
		margin: 0 auto;

		.top {
			justify-content: space-between;

			.top-left {
				background-color: #ffffff ;
				padding: 8rpx;
				width: 62%;
				.dep{
					min-width: 107rpx;
				}
			}

			.top-right {
				background-color: #ffffff ;
				padding: 12rpx;
				width: 36%;
				line-height: 60rpx;

				.item {
					
					&:last-child {}
				}

			}
		}

		.middle {
			background-color: #ffffff ;
			padding: 10rpx;
			margin: 20rpx 0;
			min-height: 200rpx;

			.item {
				.content {
					text-indent: 40rpx;
				}
			}
		}

		.bottom {
			background-color: #ffffff ;
			padding: 10rpx;
			min-height: 200rpx;
			
			.img-box{
				align-self: flex-start;
				flex-wrap: wrap;
				width: 95%;
				margin: 0 auto;
				.img-container{
					margin: 10rpx;
					width: 158rpx;
					height: 158rpx;
				}
			}
			
		}

		.footer {
			width: 100%;
			position: absolute;
			bottom: 20rpx;

		}

	}

	.button-box {
		width: 95%;
		position: fixed;
		bottom: 20rpx;

		.button-bg {
			background-color: #1AAD19;
			color: #FFFFFF;
			height: 70rpx;
			width: 200rpx;
			text-align: center;
			line-height: 70rpx;
		}

		.assign {
			border-radius: 10rpx;

		}

		.entering {
			border-radius: 10rpx;
		}
	}
	
	.box-shadow{
		box-shadow: 0 2px 4px 0 rgba(22,22,22,.2), 0 3px 10px 0 rgba(25,25,25,.1);
		border-radius: 10rpx;
	}
</style>
